<template>
  <view class="titlebar">
    <view class="fixed-content">
      <view class="menus-wrap">
        <image class="logo" src="/static/logo.ico" mode="aspectFit"></image>
        
        <view class="menus-list">
          <view class="menu-item" v-for="(it, idx) in menus" :key="idx" :id="idx">
            <text class="menu-item-name">{{it.name}}</text>
            <view v-if="selectedMenuIndex==idx" class="submenu-pop">
              <view class="submenu-item" v-if="sit.visible" v-for="(sit, sidx) in it.submenus" :key="sidx" @click="clickSubMenuItem(idx, sidx)">{{sit.name}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-wraps">
        <text class="icon-btn" @click="onBtnMin">{{'\ueaf5'}}</text>
        <text v-if="isMaximize" class="icon-btn" @click="onBtnUnmax">{{'\ue653'}}</text>
        <text v-else class="icon-btn" @click="onBtnMax">{{'\ue65b'}}</text>
        <text class="icon-btn" @click="onBtnClose">{{'\ue723'}}</text>
      </view>
    </view>
    
  </view>
</template>

<script>
  // 由于在PC H5中 uniapp 的 @touchstart @touchmove @touchend 事件都失效(即鼠标点击滑动无响应!!)，并且 uniapp 的 hover 事件也没有，
  // 因此使用 jquery 进行处理. 需要先在项目根目录下安装 jQuery:   npm install jquery 
  
  import $ from 'jquery' 
  import config from '../../static/js/config.js'
  

  
  export default {
    data() {
      return {
        menus: [
          { name: '文件', 
            submenus: [ 
              {name: '打开视频目录', type:'open_video_dir',    visible: true }, 
              {name:'退出',          type:'quit',              visible: true },
            ],
          },
          { name: '编辑', 
            submenus: [ 
              {name: '下载视频',      type:'download_video',    visible: !config.isLocalMock }, 
              {name: '刷新播放列表',  type:'refresh_play_list', visible: true }, 
              {name: '检查版本更新',  type:'check_update',      visible: config.hotupdateEnabled },
            ],
          },
          { name: '视图', 
            submenus: [
              {name: '隐藏标题栏',    type:'hide-titlebar',    visible: true },
            ]
          },
          { name: '帮助',
            submenus: [
              {name: '关于易鑫',      type:'about-us',    visible: true },
            ]
          }
        ],
        nativeTouch:true,
        selectedMenuIndex: -1,
        clickSubMenuTime: 0,
        isMaximize: false,
      }
    },
    
    mounted() {
      console.log('==== mounted')
      
      
      this.$nextTick(()=>{
        this.initJquery()
      })
      
    },
    destroyed() {
      
    },
    methods: {
      initJquery() {
        var self = this
        var _isDown = false 
        var posx, posy; 
        
        //开始事件
        $('.fixed-content').on('mousedown', (e)=>{
          if(!_isDown) _isDown = true;
          // 转化为uniapp相同数据结构并统一处理 
          // self.onTouchStart({
          //   changedTouches: [
          //     {"clientX": e.pageX, "clientY": e.pageY}
          //   ]
          // })
          posx = e.pageX 
          posy = e.pageY
        })
        //移动事件
        $('.fixed-content').on('mousemove', (e)=>{
          if (_isDown) {
            window.api?.moveOffset({x: e.pageX-posx, y: e.pageY-posy}) 
          } 
        })
        //结束事件
        $('.fixed-content').on('mouseup', (e)=>{
          _isDown = false 
        })
        //结束事件
        $('.fixed-content').on('mouseout', (e)=>{
          _isDown = false
        })
        // 按钮区滑动点击不穿透
        $('.btn-wraps').on('mousedown', (e)=>{
          e.stopPropagation()
        })
        
        $('.menu-item').hover(
          function() {
            // 鼠标移入
            // $(this).css('background-color', 'lightblue');
            if (Date.now() - self.clickSubMenuTime < 300) { //防止点击子菜单后没有隐藏 
              return;
            }
            self.selectedMenuIndex = this.id 
          },
          function() {
            // 鼠标移出
            // $(this).css('background-color', '#f0f0f0');
            self.selectedMenuIndex = -1
          }
        )
      },
      
      onBtnMin() {
        console.log('=== onBtnMin')
        window.api?.toMin()
      },
      onBtnMax() {
        window.api?.toMax()
        this.isMaximize = true 
      },
      onBtnUnmax() {
        window.api?.toUnmax()
        this.isMaximize = false 
      },
      onBtnClose() {
        window.api?.toClose()
      },
      clickMenuItem(index) {
        this.selectedMenuIndex = index 
      },
      clickSubMenuItem(menuIdx, subMenuIdx) {
        this.selectedMenuIndex = -1
        this.clickSubMenuTime  = Date.now()
        let subItem = this.menus[menuIdx].submenus[subMenuIdx] 
         
        if (menuIdx == 0) { //【文件】
          if (subItem.type === 'open_video_dir') { //打开视频目录
            window.api?.openVideoDir() 
            
          } else if (subItem.type === 'quit') { //退出应用
            window.api?.exitApp() 
          }
          
        } else if (menuIdx == 1) { //【编辑】
          if (subItem.type === 'download_video') { //视频下载
            this.$emit('clickmenu', 'video-download')
            
          } else if (subItem.type === 'refresh_play_list') { //刷新播放列表 
            this.$emit('clickmenu', 'refresh-play-list') 
            
          } else if (subItem.type === 'check_update') { //检查更新 
            this.$emit('clickmenu', 'check_update') 
          } 
        } else if (menuIdx == 2) { //视图
          if (subItem.type === 'hide-titlebar') {
            this.$emit('clickmenu', 'hide-titlebar') 
          }
        } else if (menuIdx == 3) { //帮助
          if (subItem.type === 'about-us') {
            this.$emit('clickmenu', 'about-us')
          }
        }
      },
      
    }
  }
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url('@/static/font/iconfont.ttf');
}
.titlebar {
  width: 100vw;
  height: 40px;
  background-color: #3c3c3c;
  z-index: 9999; /*调高层级, 防止被其他内容如video遮盖*/
}
.fixed-content {
  position: fixed;
  width: 100vw;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.menus-wrap {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 6px;
}
.logo {
  width: 20px;
  height: 20px;
}
.title {
  font-size: 14px;
  color: #cccccc;
  margin-left: 6px;
}
.menus-list {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 8px;
}
.menu-item {
  height: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.menu-item:hover {
  background-color: #454646;
}
.menu-item-name {
  padding: 8px;
  font-size: 14px;
  color: #d7d7d7;
}
.submenu-pop {
  position: fixed;
  top: 34px;
  width: 150px;
  min-height: 160px;
  box-sizing: border-box;
  border-radius: 0 0 4px 4px;
  background-color: #454646;
}
.submenu-item {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding-left: 20px;
  padding-right: 4px;
  box-sizing: border-box;
  border-bottom: 1px solid #5b5b5b;
  
  font-size: 12px;
  color: #c8c8c8;
  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; 
  overflow: hidden;
  text-overflow: ellipsis; 
}
.submenu-item:hover {
  color: #fff;
  background-color: #0b598c;
}
.submenu-text {
  
}
.btn-wraps {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 4px;
}
.icon-btn {
  font-family: "iconfont";
  font-size: 16px;
  color: #d7d7d7;
  padding: 10px;
}
.icon-btn:hover {
  background-color: #565656;
}


</style>